<template>
	<view class="login container" :style="[{'font-weight':Style,'font-family':Font}]">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon cuIcon-back" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">Pass</view>
			<view class="welcome">
				修改密码！
			</view>
			<view class="input-content">
				<wInput v-model="lusercode" :abled="true" type="text" :mainlist="'main-listTh'" maxlength="20" placeholder="用户名/电话">
				</wInput>
				<wInput v-model="lpassword" type="password" maxlength="11" placeholder="旧密码"></wInput>
				<wInput v-model="newlpassword" type="password" maxlength="11" placeholder="新密码"></wInput>
				<wInput v-model="newlpassword2" type="password" maxlength="11" placeholder="新密码"></wInput>
			</view>
			<wButton text="确  认" :rotate="isRotate" @click.native="startLogin()"></wButton>
		</view>
		<view class="register-section">
			<text>Copyright © 安徽柠徽信息工程有限公司</text>
		</view>
	</view>
</template>

<script>
	import {
		postalterPwd
	} from "@/service/updateList.js";
	import wInput from "@/colorui/components/watch-input.vue"; //input
	import wButton from "@/colorui/components/watch-button.vue"; //button
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				lusercode: "",
				lpassword: "",
				newlpassword:"",
				newlpassword2:"",
				usercodeList: [],
				viewName: 'isviewClose',
				isactive: false,
				logoImage: "../../static/images/logo.png",
				isRotate: false //是否加载旋转
			};
		},
		computed: {
			...mapGetters(["Style", 'Font', ])
		},
		onLoad() {
			this.lusercode = uni.getStorageSync("lusercode");
		},
		components: {
			wInput, //input
			wButton //button
		},
		mounted() {
			
		},
		methods: {
			active() {
				this.viewName = (this.viewName == 'isviewOpen' ? 'isviewClose' : 'isviewOpen')
				this.isactive = !this.isactive
			},
			
			startLogin() {
				//确认
				console.log(55555555);
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.lpassword == "") {
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请输入旧密码"
					});
					return;
				} else if(this.newlpassword == "" || this.newlpassword2 == "") {
					uni.showToast({
						icon: "none",
						title: "请输入新密码"
					});
				} else if (this.newlpassword != this.newlpassword2) {
					uni.showToast({
						icon: "none",
						title: "两次输入新密码不一致，请重新输入！"
					});
				} else {
					postalterPwd(this.lusercode,this.lpassword,this.newlpassword).then(res => {
						if(res.code == 1) {
							uni.showToast({
								title:'修改成功！',
								icon:'success'
							})
							global.falg = true
							setTimeout(function() {
								this.isRotate = false;
							}, 500);
							setTimeout(() => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							},800)
						} else {
							uni.showToast({
								title:'修改失败！',
								icon:'none'
							})
							this.isRotate = false
						}
					})
					
				}
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
		}
	};
</script>

<style lang="scss">
	@import "../../static/css/main.css";

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.back-btn,
	.back-btn2 {
		position: absolute;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 50upx;
		color: $font-color-dark;
	}

	.back-btn {
		left: 40upx;
	}

	.back-btn2 {
		right: 40upx;
	}


	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}

	.input-content {
		padding: 0 60upx;

		.borderS {
			border-bottom: 2rpx solid #EEEEEE;
		}

		.borderS:last-child {
			border: none;
		}

		.isviewOpen {
			transform: rotate(180deg);
		}

		.isviewClose {
			transform: rotate(0deg);
		}

		.screen {
			position: absolute;
			top: 100%;
			left: -2rpx;
			width: 100%;
			border-radius: 40rpx;
			background-color: #f5f7fa;
		}
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
